<template>
  <a-layout>
    <a-layout style="padding: 0 24px 24px">
      <a-layout-content
        :style="{ background: '#f0f2f5', padding: '24px', margin: 0, minHeight: 'calc(100vh - 64px)' }"
      >
        <div style="margin-bottom: 24px; display: flex; align-items: center; gap: 16px">
          <a-select
            style="width: 240px"
            placeholder="请选择学生"
            v-model:value="selectedStudent"
            @change="handleStudentChange"
            size="large"
          >
            <a-select-option v-for="student in students" :key="student.id" :value="student.id">
              <div style="display: flex; align-items: center;">
                <a-avatar :src="student.avatar" style="margin-right: 12px;" />
              {{ student.name }}
        </div>
            </a-select-option>
          </a-select>
          <a-tag color="blue" v-if="selectedStudent">
            当前选择: {{ students.find(s => s.id === selectedStudent)?.name }}
          </a-tag>
          </div>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-card title="学情分析" :bordered="false" :headStyle="{ borderBottom: 0 }">
              <a-space direction="vertical" size="large" style="width: 100%">
                <a-statistic
                  title="总分"
                  :value="studentData.totalScore"
                  :value-style="{ color: '#1890ff', fontSize: '28px' }"
                />
                <a-statistic
                  title="班级排名"
                  :value="studentData.rank"
                  :value-style="{ color: '#52c41a', fontSize: '28px' }"
                />
                <a-statistic
                  title="平均分"
                  :value="studentData.average"
                  :value-style="{ color: '#722ed1', fontSize: '28px' }"
                />
              </a-space>
        </a-card>
          </a-col>
          <a-col :span="12">
            <a-card
              title="知识点掌握情况"
              :bordered="false"
              :headStyle="{ borderBottom: 0 }"
              :bodyStyle="{ padding: '16px 0' }"
            >
              <div style="height: 300px">
                <v-chart :option="radarOption" autoresize />
              </div>
            </a-card>
          </a-col>
        </a-row>

        <a-card
          title="知识图谱"
          style="margin-top: 24px"
          :bordered="false"
          :headStyle="{ borderBottom: 0 }"
        >
          <div style="height: 350px; background: #fff; border-radius: 8px; padding: 16px">
            <KnowledgeGraph :subject="selectedSubject" />
          </div>
        </a-card>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import KnowledgeGraph from '@/components/KnowledgeGraph.vue'

use([
  CanvasRenderer,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent
])

export default {
  components: {
    VChart,
    KnowledgeGraph,
  },
  setup() {
    const selectedStudent = ref(null)
    const selectedSubject = ref('math')
    const students = reactive([
      { id: 1, name: '张三', avatar: 'https://randomuser.me/api/portraits/men/1.jpg' },
      { id: 2, name: '李四', avatar: 'https://randomuser.me/api/portraits/men/2.jpg' },
      { id: 3, name: '王五', avatar: 'https://randomuser.me/api/portraits/men/3.jpg' }
    ])
    const studentData = reactive({
      totalScore: 0,
      rank: 0,
      average: 0,
      knowledgePoints: []
    })
    const radarOption = reactive({
      title: {
        text: '知识点掌握雷达图',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        data: ['掌握程度'],
        bottom: 0
      },
      radar: {
        indicator: [],
        radius: '65%',
        splitNumber: 4,
        axisName: {
          color: '#666'
        },
        splitArea: {
          areaStyle: {
            color: ['rgba(24, 144, 255, 0.1)', 'rgba(24, 144, 255, 0.2)']
          }
            },
        axisLine: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0.2)'
          }
            },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0.2)'
          }
        }
      },
      series: [
        {
          name: '掌握程度',
          type: 'radar',
          data: [
            {
              value: [],
              name: '掌握程度',
              areaStyle: {
                color: 'rgba(24, 144, 255, 0.4)'
              },
              lineStyle: {
                width: 2,
                color: '#1890ff'
              },
              symbolSize: 6
    }
          ]
        }
      ]
    })

    const fetchStudentData = async (studentId) => {
      return new Promise(resolve => {
        setTimeout(() => {
          const mockData = [
            {
              id: 1,
              name: '张三',
              totalScore: 85,
              rank: 3,
              average: 78,
              knowledgePoints: [
                { name: '代数', score: 80 },
                { name: '几何', score: 75 },
                { name: '函数', score: 85 },
                { name: '统计', score: 90 },
                { name: '概率', score: 70 }
              ]
            },
            {
              id: 2,
              name: '李四',
              totalScore: 92,
              rank: 1,
              average: 78,
              knowledgePoints: [
                { name: '代数', score: 95 },
                { name: '几何', score: 90 },
                { name: '函数', score: 88 },
                { name: '统计', score: 93 },
                { name: '概率', score: 85 }
              ]
            },
            {
              id: 3,
              name: '王五',
              totalScore: 78,
              rank: 5,
              average: 78,
              knowledgePoints: [
                { name: '代数', score: 70 },
                { name: '几何', score: 75 },
                { name: '函数', score: 80 },
                { name: '统计', score: 75 },
                { name: '概率', score: 65 }
              ]
            }
          ]
          resolve(mockData.find(item => item.id === studentId))
        }, 300)
      })
    }

    const handleStudentChange = async (studentId) => {
      const data = await fetchStudentData(studentId)
      if (data) {
        studentData.totalScore = data.totalScore
        studentData.rank = data.rank
        studentData.average = data.average
        studentData.knowledgePoints = data.knowledgePoints

        radarOption.radar.indicator = data.knowledgePoints.map(item => ({
          name: item.name,
          max: 100
        }))
        radarOption.series[0].data[0].value = data.knowledgePoints.map(item => item.score)
      }
    }

    onMounted(async () => {
      if (students.length > 0) {
        selectedStudent.value = students[0].id
        await handleStudentChange(students[0].id)
      }
    })

    return {
      selectedStudent,
      selectedSubject,
      students,
      studentData,
      radarOption,
      handleStudentChange
    }
  }
}
</script>

<style scoped>
.ant-statistic {
  margin-bottom: 8px;
}
.ant-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}
.ant-card-head-title {
  font-weight: 500;
}
</style>